<template>
	<view class="content">
		<view class="head-infor">
			<view class="back-btn" @click="backIndex">
				<image src="../../static/image/index/back.png" mode=""></image>
			</view>
			<view class="head-icon">
				<image :src="imgUrl+myInfor.avatar" mode=""></image>
				<view class="my-name">{{myInfor.nickname}}</view>
			</view>
			<view class="balance" @click="toWallet">
				<view class="balance-infor">
					<view>賬戶餘額(元)</view>
					<view class="balance-num">
						{{myInfor.money}}
					</view>
				</view>
				<view class="btn" @click.stop='toWithdraw'>提現</view>
			</view>
		</view>
		<view class="my-order">
			<view class="title">我的訂單</view>
			<view class="status">
				<view class="one-status" @click="showOrder">
					<image src="../../static/image/index/all-order.png" mode=""></image>
					<view>全部</view>
				</view>
				<view class="one-status">
					<image src="../../static/image/index/underway-order.png" mode=""></image>
					<view>進行中</view>
				</view>
				<view class="one-status">
					<image style="width:40rpx;height:45rpx;" src="../../static/image/index/over-order.png" mode="">
					</image>
					<view style="marign-top:9rpx;">已完成</view>
				</view>
				<view class="one-status">
					<image src="../../static/image/index/clear-order.png" mode=""></image>
					<view>已取消</view>
				</view>
			</view>
		</view>
		<view class="all-serve">
			<view class="one-serve" @click="showMyCar">
				<view class="serve-left">
					<view class="serve-img">
						<image src="../../static/image/index/serve1.png" mode=""></image>
					</view>
					<view class="serve-name">我的愛車</view>
				</view>
				<image class="open" src="../../static/image/index/more.png"></image>
			</view>
			<view class="one-serve" @click="toApprove">
				<view class="serve-left">
					<view class="serve-img">
						<image style="width:27rpx;height:33rpx;" src="../../static/image/index/serve2.png" mode="">
						</image>
					</view>
					<view class="serve-name">司機認證</view>
				</view>
				<image class="open" src="../../static/image/index/more.png"></image>
			</view>
			<view class="one-serve" @click="showMyMoney">
				<view class="serve-left">
					<view class="serve-img">
						<image style="width:26rpx;height:30rpx;" src="../../static/image/index/serve3.png" mode="">
						</image>
					</view>
					<view class="serve-name">我的流水</view>
				</view>
				<image class="open" src="../../static/image/index/more.png"></image>
			</view>
			<view class="one-serve" @click="toInvite">
				<view class="serve-left">
					<view class="serve-img">
						<image style="width:30rpx;height:30rpx;" src="../../static/image/index/serve4.png" mode="">
						</image>
					</view>
					<view class="serve-name">邀請好友</view>
				</view>
				<image class="open" src="../../static/image/index/more.png"></image>
			</view>
			<view class="one-serve" @click="callServe">
				<view class="serve-left">
					<view class="serve-img">
						<image style="width:32rpx;height:30rpx;" src="../../static/image/index/serve5.png" mode="">
						</image>
					</view>
					<view class="serve-name">聯係客服</view>
				</view>
				<image class="open" src="../../static/image/index/more.png"></image>
			</view>
			<view class="one-serve" @click="toFeedback">
				<view class="serve-left">
					<view class="serve-img">
						<image style="width:30rpx;height:30rpx;" src="../../static/image/index/serve6.png" mode="">
						</image>
					</view>
					<view class="serve-name">意見反饋</view>
				</view>
				<image class="open" src="../../static/image/index/more.png"></image>
			</view>
			<view class="one-serve" @click="changePassword">
				<view class="serve-left">
					<view class="serve-img"  style="margin:0">
						<image style="width:36rpx;height:36rpx;" src="../../static/image/index/password.png" mode="">
						</image>
					</view>
					<view class="serve-name">修改密碼</view>
				</view>
				<image class="open" src="../../static/image/index/more.png"></image>
			</view>
			<view class="one-serve" style="margin-bottom:0;" @click="showAgreement('privacy_policy')">
				<view class="serve-left">
					<view class="serve-img">
						<image style="width:27rpx;height:30rpx;" src="../../static/image/index/serve7.png" mode="">
						</image>
					</view>
					<view class="serve-name">隱私策略</view>
				</view>
				<image class="open" src="../../static/image/index/more.png"></image>
			</view>
		</view>
		<view style="margin-top:20rpx;width:150rpx;margin-left:30rpx;">
			<u-button type="primary" @click="showTest" text="确定"></u-button>
		</view>
		<u-popup :show="showDriverType" @close="close" round='15'  mode='center'>
			<view class="driver-type">
				<view class="title">
					選擇司機類型
				</view>
				<view class="all-type">
					<view class="one-type" @click="toApproveDriver(1)">
						<image src="../../static/image/index/driver1.png" mode=""></image>
						<text>我是Taxi司機</text>
					</view>
					<view class="one-type" @click="toApproveDriver(2)">
						<image src="../../static/image/index/driver2.png" mode=""></image>
						<text>我是私家車司機</text>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showService" bgColor='transparent' @close="close" round='15'  mode='center' >
			<view class="serve-content">
				<view class="code-content">
					<image class="code" :src="serviceCode" mode=""></image>
					<view class="tips">扫码添加客服微信</view>
					<view class="phone">
						拨打客服电话 <text @click="callPhone">{{servicePhone}}</text>
					</view>
				</view>
				<image @click="close" class="close-btn" src="../../static/image/index/close.png" mode=""></image>
			</view>
		</u-popup>
		<view style='width:100%;height:40rpx;'></view>
	</view>
</template>

<script>
	import { serviceInfor } from '../../request/api.js'
	export default {
		data() {
			return {
				showDriverType:false,
				showService:false,
				serviceCode:"",
				servicePhone:''
			};
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
		},
		computed:{
			myInfor(){
				return this.$store.getters.myInfor
			},
			imgUrl(){
				return this.$store.state.user.imgUrl
			}
		},
		onShow() {
			console.log(this.myInfor);
		},
		methods:{
			showTest(){
				uni.navigateTo({
					url:'/pages/test/test'
				})
			},
			// 顯示政策
			showAgreement(e){
				uni.navigateTo({
					url:'/pages/agreement/agreement?type='+e
				})
			},
			// 顯示訂單列表
			showOrder(){
				uni.navigateTo({
					url:'/pages/my-order/my-order'
				})
			},
			// 錢包頁面
			toWallet(){
				uni.navigateTo({
					url:'/pages/my-wallet/my-wallet'
				})
			},
			toWithdraw(){
				uni.navigateTo({
					url:'/pages/withdraw-deposit/withdraw-deposit'
				})
			},
			// 去邀請好友
			toInvite(){
				uni.navigateTo({
					url:'/pages/invite/invite'
				})
			},
			// 拨打电话
			callPhone() {
				let that = this;
				uni.makePhoneCall({
					// 手机号
					phoneNumber:that.servicePhone,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
						this.call_phone(); //重复调用一次
					}
				});
			},
			toFeedback(){
				uni.navigateTo({
					url:'/pages/feedback/feedback'
				})
			},
			backIndex(){
				uni.navigateBack()
			},
			// 修改密碼
			changePassword(){
				uni.navigateTo({
					url:'/pages/change-password/change-password'
				})
			},
			close(){
				this.showDriverType=false;
				this.showService=false;
			},
			// 联系客服
			async callServe(){
				let res=await serviceInfor();
				console.log(res);
				if(res.code==1){
					this.showCode=res.data;
					this.serviceCode=res.data.service_wx_qrcode,
					this.servicePhone=res.data.service_phone;
					this.showService=true;
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			// 顯示我的流水
			showMyMoney(){
				uni.navigateTo({
					url:'/pages/my-funds/my-funds'
				})
			},
			// 選擇類型
			toApprove(){
				this.showDriverType=true;
			},
			// 去認證
			toApproveDriver(type){
				this.$store.commit("user/CHANGE_DRIVER_TYPE",type);
				this.showDriverType=false;
				uni.navigateTo({
					url:'/pages/driver-approve/driver-approve'
				})
			},
			// 顯示我的愛車
			showMyCar(){
				uni.navigateTo({
					url:'/pages/my-car/my-car'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;
		.serve-content{
			width:500rpx;display: flex;align-items: center;
			flex-direction: column;
			.close-btn{
				width:50rpx;height:50rpx;
				margin-top:40rpx;
			}
			.code-content{
				background-color: rgba(255, 255, 255, 0.9);
				width:500rpx;border-radius: 15rpx;
				padding-top:60rpx;display: flex;align-items: center;
				flex-direction:column;padding-bottom:56rpx;
				.code{
					width:300rpx;height: 300rpx;
					margin-left:auto;margin-right:auto;
				}
				.tips{
					margin-top:40rpx;font-size:30rpx;line-height:42rpx;
					margin-left:auto;margin-right:auto;text-align: center;
				}
				.phone{
					display: flex;margin-top:10rpx;display: flex;
					align-items: center;
					justify-content: center;
					font-size:30rpx;line-height:42rpx;
					text{
						color:#D71B0A;text-decoration: underline;
					}
				}
			}
		}
		.head-infor {
			width: 100%;
			height: 544rpx;
			background-image: url('../../static/image/index/mine-bg.png');
			background-size: 100% 100%;
			position: relative;
			padding-top: 149rpx;
			box-sizing: border-box;

			.back-btn {
				position: fixed;
				top: 110rpx;
				left: 24rpx;
				width: 44rpx;
				height: 44rpx;

				image {
					width: 44rpx;
					height: 44rpx;
				}
			}

			.head-icon {
				width: 200rpx;
				margin-left: auto;
				margin-right: auto;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				image {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
				}

				.my-name {
					font-size: 26rpx;
					color: #040404;
					line-height: 37rpx;
				}
			}

			.balance {
				width: 100%;
				position: absolute;
				bottom: 51rpx;
				left: 0;
				padding-left: 96rpx;
				padding-right: 72rpx;
				justify-content: space-between;
				display: flex;
				align-items: center;
				box-sizing: border-box;

				.balance-infor {
					font-size: 26rpx;
					color: #ffffff;
					line-height: 37rpx;

					.balance-num {
						margin-top: 10rpx;
						font-size: 50rpx;
						line-height: 61rpx;
					}
				}

				.btn {
					width: 94rpx;
					height: 45rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #ffffff;
					border-radius: 45rpx;
					color: #040404;
					font-size: 24rpx;
				}
			}
		}
		.driver-type{
			width:530rpx;
			.title{
				width:100%;height:99rpx;border-bottom:1px solid #F0F0F0;
				font-size:32rpx;color:#040404;justify-content: center;
				display: flex;align-items: center;
			}
			.all-type{
				.one-type{
					display: flex;align-items: center;padding:33rpx 0;
					justify-content: center;flex-direction: column;
					image{
						width:110rpx;height:110rpx;
					}
					text{
						font-size:28rpx;color:#040404;margin-top:24rpx;
						text-align: center;
					}
				}
			}
		}
		.my-order {
			margin-top: 30rpx;
			width: 702rpx;
			margin-left: auto;
			margin-right: auto;
			padding: 24rpx;
			box-sizing: border-box;
			box-shadow: 0 2rpx 12rpx 0 rgba(204, 204, 204, 0.3);
			border-radius: 15rpx;
			background-color: #ffffff;

			.title {
				font-size: 30rpx;
				color: #040404;
				line-height: 42rpx;
			}

			.status {
				display: flex;
				align-items: center;
				margin-top: 34rpx;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 30rpx;

				.one-status {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 44rpx;
						height: 44rpx;
						margin-bottom: 10rpx;
					}

					font-size:24rpx;
					color:#040404;
					line-height:33rpx;
				}
			}
		}

		.all-serve {
			margin-top: 30rpx;
			width: 702rpx;
			margin-left: auto;
			margin-right: auto;
			padding: 24rpx;
			box-sizing: border-box;
			box-shadow: 0 2rpx 12rpx 0 rgba(204, 204, 204, 0.3);
			border-radius: 15rpx;
			background-color: #ffffff;

			.one-serve {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 60rpx;

				.serve-left {
					display: flex;
					align-items: center;

					.serve-img {
						width: 58rpx;
						display: flex;
						align-items: center;
						margin-left:6rpx;
						image {
							width: 34rpx;
							height: 32rpx;
						}
					}

					.serve-name {
						font-size: 30rpx;
						color: #040404;
						line-height: 42rpx;
					}
				}

				.open {
					width: 10rpx;
					height: 15rpx;
				}
			}
		}
	}
</style>